<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文件上传</title>
  <style>
      .box {
      width: 0;
      height: 60px;
      line-height: 60px;
      font-size: 30px;
      text-align: center;
      background-color: orangered;
    }
    .box img {
      width: 100%;
    }
  </style>
</head>

<body>
  <!-- <input type="file" id="upload" multiple> -->
  <input type="file" id="upload">
  <div class="box">
    <img src="" alt="">
  </div>
  <!-- <script src="../assets/js/jquery-1.12.2.js"></script> -->
  <script>
    // $("#upload").on("change", function () {
    //   var data = new FormData()
    //   data.append("avatar", this.files[0])
    //   $.ajax({
    //     type: "post",
    //     url: "http://127.0.0.1:3002/uploadFile",
    //     data: data,
    //     contentType:false,
    //     processData:false,
    //     dataType: "json",
    //     success: function (res) {
    //       // console.log(res);
    //       if (res.code == 0) {
    //         // console.log( res.src );
    //       // $(".box img").attr("src", res.src)
    //       document.querySelector('.box img').src = res.src
    //       }
    //     }
    //   })
    // })
    var box=document.querySelector(".box")  
    var upload = document.querySelector("#upload")
    var img = document.querySelector(".box img")

    upload.onchange = function () {
      var xhr = new XMLHttpRequest()
      xhr.open("post", "http://127.0.0.1:3002/uploadFile")
      xhr.upload.onprogress = function(event){
        var pencent=parseInt(event.loaded/event.total*100)  
        box.innerHTML=pencent+"%"
        box.style.width=pencent+"%"
        // console.log( pencent );
      }
      var data = new FormData()
      data.append("avatar", this.files[0])
      xhr.send(data)
      xhr.onreadystatechange = function (obj) {
        if (xhr.status == 200 && xhr.readyState == 4) {
          var obj = JSON.parse(xhr.responseText)
          if (obj.code == 0) {
            img.src = obj.src
            console.dir(upload);
          }
        }
      }
    }



  </script>
</body>

</html>